<script>

export default {
  name: 'Detail',
  data() {
    return {
      datePickerType: 'datetime',
      list: [],
      total: 0,
      tableLoading: false,
      startTimeOption: {
        disabledDate: this.disabledStartDate
      },
      endTimeOption: {
        disabledDate: this.disabledEndDate
      },
      queryForm: {
        page: 1,
        limit: 10,
        solidifyDateStart: null,
        solidifyDateEnd: null
      }
    }
  },
  methods: {
    resetHandler() {
      this.queryForm = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    handleSizeChange(limit) {
      this.queryForm.limit = limit
      this.getList()
    },
    handleCurrentChange(page) {
      this.queryForm.page = page
      this.getList()
    },
    formatDate(value) {
      if (this.dateType === 'day') {
        return value.slice(0, value.lastIndexOf(':'))
      } else if (this.dateType === 'month') {
        return value.slice(0, 10)
      }
      return value.slice(0, 7)
    },
    getList() {
      if (this.device.meterDeviceId != null && this.device.meterDeviceId.length > 0) {
        const obj = Object.assign({}, this.queryForm)
        obj.meterDeviceId = this.device.meterDeviceId
        this.$api.energyData.queryPageByMeterDevice(obj)
          .then(res => {
            this.list = res.data.records
            this.total = res.data.total
          })
      } else {
        this.list = []
        this.total = 0
      }
    }
  },
  props: {
    dateType: {
      required: true,
      type: String
    },
    device: {
      required: true,
      type: Object
    }
  },
  created() {
    this.getList()
  }
}
</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="queryForm" inline>
        <el-form-item label="开始时间" prop="solidifyDateStart">
          <el-date-picker v-model="queryForm.solidifyDateStart" type="month" value-format="yyyy-MM"
                          format="yyyy-MM"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="solidifyDateEnd">
          <el-date-picker v-model="queryForm.solidifyDateEnd" type="month" value-format="yyyy-MM"
                          format="yyyy-MM"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="getList" type="primary" icon="el-icon-search">查询</el-button>
          <el-button size="small" @click="resetHandler" icon="el-icon-refresh-right">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="tableLoading">
        <el-table-column label="日期" width="160">
          <template #default="{row}">{{ formatDate(row.createTm) }}</template>
        </el-table-column>
        <el-table-column prop="readTime" label="更新时间" />
        <el-table-column prop="readValue" label="读表值" />
      </el-table>
      <el-pagination style="text-align: right;margin-top: 12px;"
                     v-if="total > 0"
                     ref="paginationRef"
                     background
                     :current-page="queryForm.currentPage"
                     :page-sizes="[10, 30, 50, 100, 200, 500]"
                     :page-size="queryForm.pageSize"
                     :layout="'total, sizes, prev, pager, next, jumper'"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>
